<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.clearfix::after{
				display: table;
				content: "";
				clear: both;
			}
			.warper{
				width: 350px;
				margin:auto;
				border: 1px solid #ddd;
				box-shadow: 0px 0px 3px #FF4400;
			}
			.nav{
				width: 350px;
			}
			.main{
				padding: 20px;
				width: 350px;
			}
			.nav ul{
				
			}
			.nav ul li{
				margin:0 18px;
				padding: 10px 0;
				width: 34px;
				text-align: center;
				float: left;
				cursor: pointer;
				list-style: none;
			}
			.nav ul .active{
				color: #fff;
				
				border-bottom: 2px solid #f40;	
				text-shadow: 0px 0px 3px #FF4400;
			}
			.main > div{
				display: none;
				
			}
			.main > div a{
				font-size: 14px;
				font-weight: 100;
				color: #333;
				text-decoration: none;
				width: 49%;
				display: inline-block;
			}
			.main .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="warper">
			<div class="nav">
				<ul class="clearfix">
					<li class="active">公告</li>
					<li>规则</li>
					<li>论坛</li>
					<li>安全</li>
					<li>公益</li>
				</ul>
			</div>
			<div class="main">
				<div class="active">
					<a href="">天猫618狂欢冲刺 </a>
					<a href="">聚划算全面爆发</a>
					<a href="">天猫618 吃货大爆发</a>
					<a href="">新西兰高端奶成交大涨</a>
				</div>
				<div>
					<a href="">新增《淘宝网汽配行业</a>
					<a href="">《淘宝网区域零售服务</a>
					<a href="">《淘宝网票务行业管理</a>
					<a href="">《淘宝网数字娱乐市场</a>
				</div>
				<div>
					<a href="">淘宝1212活动招商</a>
					<a href="">中差评功能升级</a>
					<a href="">陌生人拼团上线</a>
					<a href="">运营神器年中大促</a>
				</div>
				<div>
					<a href="">魔豆妈妈公益项目</a>
					<a href="">让母爱永不打烊！</a>
					<a href="">卖家注意：风险通报！</a>
					<a href="">售假获刑又起诉！</a>
				</div>
				<div>
					<a href="">淘宝公益平台正式更名</a>
					<a href="">益起来商家招募即将截</a>
					<a href="">卖家如何设置公益宝贝</a>
					<a href="">工艺机构开店全攻略</a>
				</div>
			</div>
		</div>
		<script>
			var nav = document.querySelectorAll(".nav ul li");
			var main = document.querySelectorAll(".main > div");
				
			for(var i = 0; i < nav.length; i++){
				nav[i].index = i;
				nav[i].addEventListener('mousemove',function(){
					for(var k = 0; k < nav.length; k++){
						nav[k].classList.remove("active");
						main[k].classList.remove("active");
						
					}
					this.classList.add("active");
					main[this.index].classList.add("active");
				})
			}

		</script>
	</body>
</html>
